<script>
import { Fancybox } from '@fancyapps/ui'
import '@fancyapps/ui/dist/fancybox/fancybox.css'

export default {
  data () {
    return {
      img1:require('../assets/pb1.jpeg'),
      img2:require('../assets/ps2.jpeg'),
      img3:require('../assets/ps3.jpeg'),
      fancyInstance: null,
      content: `<p>27日早盘，银行再现独立向上，国有五大行又一次齐刷历史新高，截至发稿，工商银行领涨1.71%，中国银行、农业银行、交通银行、建设银行均涨逾1%，中信银行、齐鲁银行、邮储银行等涨幅居前。</p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://tch.haitong.com/sandStone/20240827/CDPpbaCofk9Wa7taKzjQpt.png" alt="" data-href="" style="width: 375px;"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p><p>A<strong>股顶流银行ETF（512800）低开高走，场内价格现涨0.6%，冲击日线4连阳，盘中价格最高上探1.34元，再度刷新上市7年来新高（2017.8.3），这已是8月下旬以来银行ETF（512800）第5次刷新上市新高。</strong></p><p>&nbsp;&nbsp;<img src="https://tch.haitong.com/sandStone/20240827/To56hr5hTJ8Q5U8DGQXSvS.png" alt="" data-href="" style="width: 375px;"/></p><p>针对此轮银行行情，国信证券认为核心在于稳增长政策不及预期，实体部门投资和消费意愿复苏缓慢，经济复苏低于预期，市场风险偏好不断下降，增量资金主要来自于保险和沪深300ETF&nbsp;等低风险偏好机构。</p><p><strong>展望后市，国信证券表示，预计在全球局势明朗之前，经济复苏缓慢，资金风险偏好较低等主导银行板块行情的因素不会发生实质上的扭转，依然会是资金配置的重要方向。</strong></p><p><strong>股息铸就价值！看好银行板块配置性价比的投资者可以关注银行ETF（512800）。银行ETF（512800）被动跟踪中证银行指数，成份股囊括A股42家上市银行，近三成仓位布局工商银行、农业银行、交通银行等国有大行，捕捉“高股息”主题机会；约七成仓位聚焦招商银行、兴业银行、江苏银行等高成长性股份行、城商行、农商行，是跟踪银行板块整体行情的高效投资工具。</strong></p><p>&nbsp;&nbsp;<img src="https://tch.haitong.com/sandStone/20240827/57GSb5Sb3dinQdNZSWWXup.png" alt="" data-href="" style="width: 375px;"/></p><p>数据来源：沪深交易所、Wind、华宝基金等。</p><p>风险提示：银行ETF被动跟踪中证银行指数，该指数基日为2004.12.31，发布于2013.7.15。指数成份股构成根据该指数编制规则适时调整。文中指数成份股仅作展示，个股描述不作为任何形式的投资建议，也不代表管理人旗下任何基金的持仓信息和交易动向。基金管理人评估的该基金风险等级为R3-中风险，适宜平衡型（C3）及以上的投资者。<u><strong>任何在本文出现的信息（包括但不限于个股、评论、预测、图表、指标、理论、任何形式的表述等）均只作为参考，投资人须对任何自主决定的投资行为负责。另，本文中的任何观点、分析及预测不构成对阅读者任何形式的投资建议，亦不对因使用本文内容所引发的直接或间接损失负任何责任。基金投资有风险，基金的过往业绩并不代表其未来表现，基金管理人管理的其他基金的业绩并不构成基金业绩表现的保证，基金投资需谨慎。</strong></u></p>`
    }
  },
  methods: {
    nextClick(){
      // Fancybox.close()
      // return
      // this.fancyInstance.jumpTo(2)
      console.log('fancyInstance',this.fancyInstance)
      Fancybox.next()
      // this.fancyInstance.next()
      console.log(Fancybox.getSlide())
    },

    fancyboxInit () {
      this.fancyInstance =  Fancybox.bind('[data-fancybox="gallery"]', {
        Hash: false,
        Thumbs: false,
        // Carousel: {
        //   Navigation: true
        // },
        Toolbar: {
          display: {
            left: [],
            middle: [
              'infobar'
            ],
            right: ['close'],
          },
        },
        on:{
          ready(r){
            console.log('ready...',r)
          },
          click(){
            console.log('click..')
          },
          startSlideshow(startSlideshow){
            console.log('startSlideshow',startSlideshow)
          },
          close:(index)=>{
            console.log('close index',index)
          }
        },

      })
    },
  },
  mounted () {
    this.$nextTick(() => {
      this.fancyboxInit()
    })
  }
}


</script>

<template>
  <div class="grid grid-cols-3 gap-4 max-w-xl mx-auto p-10">
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/60/200x150">-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/60/200x150">-->
    <a data-fancybox="gallery" :href="img1">
      <img class="rounded" src="../assets/ps1.jpeg"/>
    </a>
    <a data-fancybox="gallery" :href="img2">
      <img class="rounded" src="../assets/ps2.jpeg"/>
    </a>
    <a data-fancybox="gallery" :href="img3">
      <img class="rounded" src="../assets/ps3.jpeg"/>
    </a>

    <button class="getBtn" type="button" @click="nextClick">get </button>
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/63/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/63/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/64/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/64/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/65/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/65/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/66/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/66/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/67/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/67/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/68/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/68/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/69/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/69/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/70/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/70/200x150" />-->
    <!--    </a>-->
    <!--    <a data-fancybox="gallery" href="https://lipsum.app/id/71/200x150">-->
    <!--      <img class="rounded" src="https://lipsum.app/id/71/200x150" />-->
    <!--    </a>-->
    <div v-html="content">

    </div>
  </div>
</template>

<style scoped lang="scss">
.getBtn{
  position: fixed;
  bottom:50px;
  right:50px;
  z-index:1111;
}
</style>
